<template>
  <div>
    <template v-for="(item, index) in dataForm[attrName]">
      <div :key="index" style="display: flex;position: relative; margin-top: 5px;">

        <el-select v-model="item[productId]" clearable filterable
                   remote
                   reserve-keyword
                   :remote-method="remoteMethodProductById"
                   :loading="loadingProduct"
                   placeholder="请选择产品(必选)"
                  @change="selectCallback"
        >
          <el-option
            v-for="item in productOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>

<!--        <el-select v-model="item[productId]" filterable clearable placeholder="产品配件" @input="forceUpdate"-->
<!--                   style="margin-right: 5px;">-->
<!--          <el-option v-for="item in productInfoList" :key="item.id" :label="item.name" :value="item.id">-->
<!--          </el-option>-->
<!--          -->
<!--          -->
<!--        </el-select>-->

        <el-select v-model="item[listName]" filterable clearable :placeholder="listPlaceholder" @input="forceUpdate"
                   style="margin-right: 5px;">
          <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>


        <el-input v-model="item[numberName]" :placeholder="numberPlaceholder"

                         @input="forceUpdate"
                         style="margin-right: 5px;"></el-input>

        <el-input-number v-model="item[radioName]" :placeholder="radioName"
                         type="number"
                         controls-position="right"
                  @input="forceUpdate"
                  style="margin-right: 5px;"></el-input-number>

<!--        <el-input v-model="item[inputName]" :placeholder="inputNamePlaceholder"-->

<!--                         style="margin-right: 5px;"></el-input>-->

<!--        <el-radio v-for="(item1, i) in radioList" v-model="item[radioName]"-->
<!--                  :border="radioBorder" :label="item1.label"-->
<!--                  :disabled="disabled"-->
<!--                  :key="i" @change="changedCallback"-->
<!--                  style="margin-top: 10px;"-->
<!--        >{{ item1.text }}-->
<!--        </el-radio>-->
        <el-tooltip class="item" effect="dark" content="新增"
                    placement="bottom">
          <a class="el-icon-circle-plus-outline" @click="addOneLine(index+1)"
             style="position: absolute;right: -17px; top: 10px;"></a>
        </el-tooltip>
        <el-tooltip v-if="dataForm[attrName].length > 1" class="item" effect="dark" content="删除" placement="bottom">
          <a class="el-icon-remove-outline" @click="deleteOneLine(index)"
             style="position: absolute;right: -35px; top: 10px;"></a>
        </el-tooltip>
      </div>
    </template>
  </div>
</template>

<script>
import basicMixins from './basicMixins'
import {product} from 'ramda'
import {mRequest} from '@/utils/request'

export default {
  name: 'normalListAndInputAndNumber',
  mixins: [basicMixins],
  data() {
    return {
      productInfoList:[],
      productOptions:[],
      loadingProduct: false

    }
  },
  props: {
    list: {
      type: Array,
      required: true,
      default: () => []
    },
    otherAttrs: {
      type: Array,
      default: () => []
    },
    listPlaceholder: {
      type: String,
      default: ''
    },
    listName: {
      type: String,
      default: 'key'
    },
    productId:{
      type: String,
      default: 'productId'
    },
    numberName: {
      type: String,
      default: 'value'
    },
    radioName:{
      type: String,
      default: 'radioName'
    },
    inputName:{
      type: String,
      default: ''
    },
    numberPlaceholder: {
      type: String,
      default: ''
    },
    inputNamePlaceholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    radioList: {
      type: Array
    },
    radioBorder: {
      type: Boolean
    },
    changedCallback: {
      type: Function,
      default: () => {
      }
    },
    selectCallback: {
      type: Function,
      default: () => {
      }
    },
  },
  mounted() {
    this.initRelateProductInfoList()
  },
  methods: {
//    product,
    remoteMethodProductById(query) {
      if (query !== '') {
        this.loadingProduct = true
        setTimeout(() => {
          this.loadingProduct = false
          this.productOptions = this.productInfoList.filter(item => {
            return item.name.indexOf(query.toUpperCase()) > -1
          })
        }, 100)
      } else {
        this.productOptions = []
      }
    },
    addOneLine(index) {
      const item = {}

      item[this.productId] = ''
      item[this.listName] = ''
      item[this.numberName] = ''
      item[this.radioName] = 0
      item[this.inputName] = ''

      this.otherAttrs.forEach(attr => {
        item[attr] = ''
      })
      this.dataForm[this.attrName].splice(index, 0, item)
    },
    deleteOneLine(index) {
      this.dataForm[this.attrName].splice(index, 1)
    },
    initRelateProductInfoList() {
      mRequest('productApi/getRelateProductInfoList', {}, (res) => {
        this.productInfoList = this.R.pathOr([], ['data', 'list'], res)
        this.productOptions = this.R.pathOr([], ['data', 'list'], res)
      })
    },
  },
  created() {
    this.dataForm[this.attrName] = []
    this.addOneLine(0)
  }
}
</script>

<style scoped>
</style>
